<template>
    <div class="service-package-page">
      <!-- 顶部状态栏和时间 -->
      <div>9:41</div>
      
      <!-- 页面标题栏 -->
      <van-nav-bar
  title="我的服务包"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
      <!-- 页面内容 -->
      <div class="content">
        <!-- 用户信息卡片 -->
        <van-cell-group inset class="user-card">
          <div class="user-info">
            <van-image
              round
              width="60"
              height="60"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
            <div class="user-details">
              <div class="name">{{ store.useStore.userName }}</div>
              <div class="meta">{{ store.useStore.sex }} {{ store.useStore.age }}岁</div>
            </div>
          </div>
        </van-cell-group>
        
        <!-- 服务包卡片 -->
        <van-cell-group inset class="package-card">
          <div class="package-header">
            <div class="title">高血压管理服务包</div>
          </div>
          <div class="package-content">
            <div class="expiry-date">截止日期：2024-10-10</div>
            <van-button 
              type="primary" 
              size="small" 
              round
              class="detail-btn"
              to="/me"
            >
              查看详情
            </van-button>
          </div>
        </van-cell-group>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useCounterStore } from '@/stores/counter';
  const store = useCounterStore();
  const onClickLeft = () => history.back();
  import { 
    NavBar as VanNavBar, 
    CellGroup as VanCellGroup,
    Image as VanImage,
    Button as VanButton
  } from 'vant';
  
  </script>
  
  <style scoped>
  .service-package-page {
    background-color: #f7f8fa;
    min-height: 100vh;
  }
  
  .status-bar {
    padding: 10px;
    text-align: center;
    font-size: 16px;
    color: #000;
    background-color: #fff;
  }
  
  .content {
    padding: 16px;
  }
  
  .user-card {
    background-color: #e8f5e9; /* 淡绿色背景 */
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    padding: 16px;
  }
  
  .user-details {
    margin-left: 16px;
  }
  
  .user-details .name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
  }
  
  .user-details .meta {
    font-size: 14px;
    color: #666;
  }
  
  .package-card {
    background-color: #fff; /* 白色背景 */
    border-radius: 8px;
    overflow: hidden;
  }
  
  .package-header {
    padding: 16px 16px 0;
  }
  
  .package-header .title {
    font-size: 16px;
    font-weight: bold;
  }
  
  .package-content {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .expiry-date {
    font-size: 14px;
    color: #666;
  }
  
  .detail-btn {
    width: 90px;
  }
  </style>